<template>
	<view class="setup">
		<view class="info">
			<view class="info-portrait" @click="setAvtra">
				<view class="info-text">头像</view>
				<view class="portrait" >
					<image
						style="width: 48rpx; height: 48rpx; margin-right: 20rpx;"
						:src="avtra ? avtra : localImgSrc('portrait.png')"
					></image>
					<uni-icons type="forward" size="14"></uni-icons>
				</view>
			</view>
			<view class="line"></view>
			<view class="info-portrait" @click="eidtNickName('bottom')">
				<view class="info-text">昵称</view>
				<view class="portrait" >
					<text class="nick">{{ username || '微信用户' }}</text>
					<!-- <input v-model="username" class="uni-input" /> -->
					<uni-icons type="forward" size="14"></uni-icons>
				</view>
			</view>
			<view class="line"></view>
			<view class="info-portrait">
				<view class="info-text">手机号</view>
				<view class="portrait">
					<text class="phone">{{ phoneNumber }}</text>
					<!-- <uni-icons type="forward" size="14"></uni-icons> -->
				</view>
			</view>
		</view>
		<view class="outlogin">
			<button class="outlogin-btn" @click="loginOutUser">退出登录</button>
		</view>
		<uni-popup ref="popup" background-color="#fff" border-radius="20rpx">
			<view class="popup-content">
				<input v-model="username" placeholder="请输入昵称" class="uni-input" />
				<view class="btn">
					<view size="mini" class="cancle" @click="handleCancle">取消</view>
					<view size="mini" class="confirm" @click="setUsername">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { getUploadUrl, setUploadUrl } from '@/api/upload.js'
	import { editUserInfo } from '@/api/wallet.js'
	import { getUserInfo } from '@/api/login.js'
	export default {
		data() {
			return {
				phoneNumber: '',
				username: '',
				avtra: ''
			}
		},
		onLoad(data) {
			console.log('data', data);
			// this.username = data.username;
			// this.avtra = data.portrait
			// this.phoneNumber = data.mobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2");
			// this.getUser()
		},
		onShow() {
			this.phoneNumber = ''
			this.username = ''
			this.avtra = ''
			if(uni.getStorageSync('apiticket')) {
				this.getUser()
			}
		},
		methods: {
			// 获取用户信息
			getUser() {
				const accessToken = uni.getStorageSync('acctoken')
				const openid = uni.getStorageSync('openid')
				let useStr = {
					"access_token": accessToken,
					"appid": '073820240321128890',
					"openid": openid
				}
				console.log('useStr', useStr)
				getUserInfo(useStr).then(res => {
					console.log('res', res)
					const { amount, nickname, mobile, portrait } = res
					this.username = nickname;
					this.avtra = portrait
					uni.setStorageSync('oauthConsumerKey', res.oauth_consumer_key)
					uni.setStorageSync('portrait', res.portrait)
					this.phoneNumber = mobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2");
				})
			},
			
			setAvtra() {
				uni.chooseImage({
					success: (res) => {
						console.log('成功res', res)
						const tempFilePaths = res.tempFilePaths;
						const filePath = tempFilePaths[0]; // 选择第一张图片
						const fileName = tempFilePaths[0].match(/(.*\/)*(.*)$/)[2];
						
						const fileSystemManager = wx.getFileSystemManager();
						 
						// 读取文件
						fileSystemManager.readFile({
							filePath: filePath,
							success: (readRes) => {
								// 在这里处理文件流，readRes.data就是文件的二进制数据
								console.log('文件流：', readRes.data);
								this.uploadFile(fileName, readRes.data)
							},
							fail: (err) => {
								console.error('读取文件失败：', err);
							}
						});
					},
				})	
			},
			uploadFile(name, filePath) {
				let param = {
					name: name
				}
				getUploadUrl(param).then(res => {
					console.log('url', res)
					const { url, pathUrl } = res
					// monio直传
					uni.request({
						url: url,//后端返回的签名地址
						data: filePath , //上传的文件字节流
						method: 'PUT',
						header: {
							'Content-Type': 'application/octet-stream', //此处注意
							'Content-Disposition':'inline'
						},
						success: (minio) => {
							console.log("直传返回", minio);
							this.avtra = pathUrl
							// 上传到minio成功后储存到服务器
							let tokenStr = { url: url }
							let data = { portrait: pathUrl }
							uni.showLoading({
								title: '正在修改头像，请稍等...'
							})
							editUserInfo(data).then(avt => {
								console.log('avt', avt);
								this.getUser()
								uni.hideLoading()
							}).catch(err => {
								console.log('err', err)
								uni.hideLoading()
							})
							// setUploadUrl(tokenStr).then(urlRes => {
							// 	console.log('urlRes', urlRes);
							// 	uni.hideLoading()
							// })
						}
					});
				})
			},
			setUsername() {
				if(this.username == '') {
					uni.showToast({
						title: '请输入昵称',
						icon: 'none'
					});
					return
				}
				let data = { nickname: this.username }
				uni.showLoading({
					title: '正在修改信息，请稍等...'
				})
				editUserInfo(data).then(avt => {
					console.log('avt', avt);
					uni.hideLoading();
					this.getUser()
					this.$refs.popup.close()
				}).catch(err => {
					uni.hideLoading();
					this.$refs.popup.close()
				})
			},
			handleCancle() {
				this.$refs.popup.close()
			},
			loginOutUser() {
				console.log('退出登录')
				uni.clearStorageSync();
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			eidtNickName(type) {
				this.$refs.popup.open(type)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.setup {
		margin: 20rpx 36rpx;
	}
	.info {
		background: #fff;
		border-radius: 20rpx;
		padding: 28rpx 32rpx;
		.info-portrait {
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			color: #{$one-title-color};
			.portrait {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				.uni-input {
					border: 1px solid red;
				}
			}
		}
	}
	.nick {
		color: #{$sub-color};
		margin-right: 20rpx;
	}
	.phone {
		color: #{$two-title-color};
		margin-right: 20rpx;
	}
	.outlogin {
		margin-top: 120rpx;
		.outlogin-btn {
			border-radius: 50rpx;
			background: transparent;
			color: #{$main-color};
			border: 1px solid #{$main-color};
		}
	}
	.line {
		border-bottom: 1px solid #f5f5f5;
		margin: 20rpx 0;
	}
	
	.popup-content {
		// text-align: center;
		border-radius: 20rpx;
		padding: 50rpx;
		height: 300rpx;
		background-color: #fff;
		.uni-input {
			border: 1px solid #f0f0f0;
			height: 80rpx;
			border-radius: 20rpx;
			font-size: 28rpx;
			padding: 0 10rpx;
			// margin-top: 50rpx;
		}
		.btn {
			display: flex;
			margin-top: 50rpx;
			justify-content: space-between;
			align-items: center;
			.cancle {
				border-radius: 40rpx;
				color: #{$main-color};
				border: 1px solid #{$main-color};
				width: 200rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				// height: 50rpx;
			}
			.confirm {
				background: #{$main-color};
				color: #fff;
				border-radius: 40rpx;
				width: 200rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
			}
		}
	}
</style>